<template>
  <div>
    <page :asideShow="asideShow">
      <!--工具栏-->
      <div slot="toolbar">
        <el-form
          :inline="true"
          :model="filters"
          label-width="90px"
          label-position="right"
        >
          <el-form-item label="名称：">
            <el-input
              class="normal"
              placeholder="请输入"
              clearable
              v-model="filters.name"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button @click="handleQuery">查询</el-button>
        <el-button
          type="primary"
          @click="handleAdd"
          v-show="hasPerm('sys:menu:add')"
          >新增</el-button
        >
      </div>
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="tableTreeDdata"
          stripe
          v-loading="loading"
          style="width: 100%"
          rowKey="id"
          element-loading-text="加载中..."
        >
          <!-- <el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column> -->
          <table-tree-column
            prop="name"
            header-align="center"
            treeKey="id"
            width="250"
            label="名称"
          ></table-tree-column>
          <el-table-column header-align="center" align="center" label="图标">
            <template slot-scope="scope">
              <i :class="scope.row.icon || ''"></i>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="类型"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
              <el-tag
                v-else-if="scope.row.type === 1"
                size="small"
                type="success"
                >菜单</el-tag
              >
              <el-tag v-else-if="scope.row.type === 2" size="small" type="info"
                >按钮</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="parentName"
            header-align="center"
            align="center"
            width="120"
            label="上级菜单"
          ></el-table-column>
          <el-table-column
            prop="url"
            header-align="center"
            align="center"
            width="150"
            :show-overflow-tooltip="true"
            label="菜单URL"
          ></el-table-column>
          <el-table-column
            prop="perms"
            header-align="center"
            align="center"
            width="150"
            :show-overflow-tooltip="true"
            label="授权标识"
          ></el-table-column>
          <el-table-column
            prop="orderNum"
            header-align="center"
            align="center"
            label="排序"
          ></el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="185"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="handleEdit(scope.row)"
                v-show="hasPerm('sys:menu:edit')"
                >编辑</el-button
              >
              <el-button
                type="danger"
                @click="handleDelete(scope.row)"
                v-show="hasPerm('sys:menu:remove')"
                >删除</el-button
              >
              <!-- <kt-button icon="fa fa-edit" :label="$t('action.edit')" perms="sys:menu:edit" @click="handleEdit(scope.row)"/>
              <kt-button icon="fa fa-trash" :label="$t('action.delete')" perms="sys:menu:delete" type="danger" @click="handleDelete(scope.row)"/>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div slot="footer">
        <el-pagination layout="total, prev, pager, next, jumper" @current-change="refreshPageRequest"
          :current-page="pageRequest.page" :page-size="pageRequest.pageSize" :total="totalSize" style="float:right;">
        </el-pagination>
      </div> -->
      <!--表格树内容栏-->

      <!-- 新增修改界面 -->

      <!-- 我的 -->
      <el-dialog
        title="新增"
        width="40%"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        show-close="true"
      >
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          label-width="80px"
          :size="size"
          style="text-align: left"
        >
          <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="dataForm.type">
              <el-radio
                v-for="(type, index) in menuTypeList"
                :label="index"
                :key="index"
                >{{ type }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="menuTypeList[dataForm.type] + '名称'"
            prop="name"
          >
            <el-input
              v-model="dataForm.name"
              :placeholder="menuTypeList[dataForm.type] + '名称'"
            ></el-input>
          </el-form-item>
          <el-form-item label="上级菜单" prop="parentName">
            <popup-tree-input
              :data="popupTreeData"
              :props="popupTreeProps"
              :prop="
                dataForm.parentName == null || dataForm.parentName == ''
                  ? '顶级菜单'
                  : dataForm.parentName
              "
              :nodeKey="'' + dataForm.parentId"
              :currentChangeHandle="handleTreeSelectChange"
            ></popup-tree-input>
          </el-form-item>
          <el-form-item
            v-if="dataForm.type !== 0"
            label="授权标识"
            prop="perms"
          >
            <el-input
              v-model="dataForm.perms"
              placeholder="如: sys:user:add, sys:user:edit, sys:user:delete"
            ></el-input>
          </el-form-item>

          <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
            <el-row>
              <el-col :span="22">
                <el-input
                  v-model="dataForm.url"
                  placeholder="菜单路由"
                ></el-input>
              </el-col>
              <el-col :span="2" class="icon-list__tips">
                <el-tooltip
                  placement="top"
                  effect="light"
                  style="padding: 10px"
                >
                  <div slot="content">
                    <p>URL格式：</p>
                    <p>
                      1.常规业务开发的功能URL，如用户管理，Views目录下页面路径为
                      /Sys/User, 此处填写 /sys/user。
                    </p>
                    <p>
                      2.嵌套外部网页，如通过菜单打开百度网页，此处填写
                      http://www.baidu.com，http:// 不可省略。
                    </p>
                    <p>
                      示例：用户管理：/sys/user 嵌套百度：http://www.baidu.com
                      嵌套网页：http://127.0.0.1:8000
                    </p>
                  </div>
                  <i class="el-icon-warning"></i>
                </el-tooltip>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item
            v-if="dataForm.type !== 2"
            label="排序编号"
            prop="orderNum"
          >
            <el-input-number
              v-model="dataForm.orderNum"
              controls-position="right"
              :min="0"
              label="排序编号"
            ></el-input-number>
          </el-form-item>
          <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
            <el-row>
              <el-col :span="22">
                <!-- <el-popover
                ref="iconListPopover"
                placement="bottom-start"
                trigger="click"
                popper-class="mod-menu__icon-popover">
                <div class="mod-menu__icon-list">
                  <el-button
                    v-for="(item, index) in dataForm.iconList"
                    :key="index"
                    @click="iconActiveHandle(item)"
                    :class="{ 'is-active': item === dataForm.icon }">
                    <icon-svg :name="item"></icon-svg>
                  </el-button>
                </div>
                </el-popover>-->
                <el-input
                  v-model="dataForm.icon"
                  v-popover:iconListPopover
                  :readonly="false"
                  placeholder="菜单图标名称（如：fa fa-home fa-lg）"
                  class="icon-list__input"
                ></el-input>
              </el-col>
              <el-col :span="2" class="icon-list__tips">
                <fa-icon-tooltip />
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button :size="size" @click="dialogVisible = false">{{
            $t("action.cancel")
          }}</el-button>
          <el-button :size="size" type="primary" @click="submitForm()">{{
            $t("action.comfirm")
          }}</el-button>
        </span>
      </el-dialog>
    </page>
    <!-- 新增修改弹窗 -->
    <el-dialog
      class="dialog-container"
      :title="!dataForm.id ? '新增' : '修改'"
      :visible.sync="editVisible"
      :modal-append-to-body="false"
    >
      <editPage
        v-if="editVisible"
        :dataForm="dataForm"
        @handleSave="handleSave"
        @closeEdit="closeEdit"
        @clickCancel="handleCancel"
      ></editPage>
    </el-dialog>
  </div>
</template>

<script>
import editPage from "./comments/menuAdd";
import KtButton from "@/views/Core/KtButton";
import TableTreeColumn from "@/views/Core/TableTreeColumn";
import PopupTreeInput from "@/components/PopupTreeInput";
import FaIconTooltip from "@/components/FaIconTooltip";
export default {
  components: {
    editPage,
    PopupTreeInput,
    KtButton,
    TableTreeColumn,
    FaIconTooltip,
  },
  data() {
    return {
      editVisible: false, //菜单的编辑
      asideShow: false,
      unitShow: false,
      size: "small",
      loading: false,
      filters: {
        corpId: 0,
        corpName: "",
        name: "",
        startTime: "",
        endTime: "",
      },
      totalSize: 0,
      pageRequest: {
        page: 1,
        limit: 200,
      },
      tableTreeDdata: [],
      dialogVisible: false,
      menuTypeList: ["目录", "菜单", "按钮"],
      dataForm: {
        id: 0,
        type: 1,
        name: "",
        parentId: 0,
        parentName: "",
        url: "",
        perms: "",
        orderNum: 0,
        icon: "",
        iconList: [],
        show:''
      },
      dataRule: {
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
      },
      houseList:[{ID:1,name:'展示端 '},{ID:2,name:' 大数据分析 '},{ID:3,name:'警务实战'}],
      popupTreeData: [],
      popupTreeProps: {
        label: "name",
        children: "children",
      },
    };
  },
  methods: {
    // 获取数据
    handleQuery() {
      this.findTreeData();
    },
    findTreeData: function () {
      this.loading = true;

      // let params={
      //   page:this.pageRequest.page
      // }
      let params = {
        where: {
          name: this.filters.name,
          bool: true,
          show:true
        },
      };

      let param = JSON.stringify(params);
      this.$api.menu.findMenuTree(param).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.tableTreeDdata = res.data;
          // this.totalSize=res.count
          this.popupTreeData = this.getParentMenuTree(res.data);
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    // 获取上级菜单树
    getParentMenuTree: function (tableTreeDdata) {
      let parent = {
        parentId: 0,
        name: "顶级菜单",
        children: tableTreeDdata,
      };
      return [parent];
    },
    // 显示新增界面
    handleAdd: function () {
      this.editVisible = true;
      // console.log("0000");
      this.dataForm = {
        id: 0,
        type: 1,
        typeList: ["目录", "菜单", "按钮"],
        name: "",
        parentId: 0,
        parentName: "",
        url: "",
        perms: "",
        orderNum: 0,
        icon: "",
        iconList: [],
        show:''
      };
    },
    //刷新界面
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.handleQuery(null);
    },
    // 显示编辑界面
    handleEdit: function (row) {
      this.editVisible = true;
      this.dataForm = JSON.parse(JSON.stringify(row));
      // Object.assign(this.dataForm, row);
    },
    /* 保存成功关闭编辑弹窗 */
    closeEdit: function () {
      this.editVisible = false;
      // this.handleQuery()

      //设置重新加载路由及资源
      // store.commit("menuRouteLoaded", false)
    },
    handleSave: function () {
      this.handleQuery();
    },

    /* 取消编辑 */
    handleCancel: function () {
      this.editVisible = false;
    },
    // 删除
    handleDelete(row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning",
      }).then(() => {
        // let params = this.getDeleteIds([], row);
        let params = {
          tbn: "authority_menu",
          where: {
            id: row.id,
          },
        };

        var aaa = JSON.stringify(params);
        this.$api.menu.batchDelete(aaa).then((res) => {
          if (res.code == 0) {
            this.handleQuery();
            this.$message({ message: "删除成功", type: "success" });
          }
        });
      });
    },
    // 获取删除的包含子菜单的id列表
    getDeleteIds(ids, row) {
      ids.push({ id: row.id });
      if (row.children != null) {
        for (let i = 0, len = row.children.length; i < len; i++) {
          this.getDeleteIds(ids, row.children[i]);
        }
      }
      return ids;
    },
    // 菜单树选中
    handleTreeSelectChange(data, node) {
      this.dataForm.parentId = data.id;
      this.dataForm.parentName = data.name;
    },
    // 图标选中
    iconActiveHandle(iconName) {
      this.dataForm.icon = iconName;
    },
    // 表单提交
    submitForm() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this.$api.menu.save(params).then((res) => {
              this.editLoading = false;
              if (res.code == 200) {
                this.$message({ message: "操作成功", type: "success" });
                this.$refs["dataForm"].resetFields();
                this.dialogVisible = false;
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
              this.findTreeData();
            });
          });
        }
      });
    },
  },
  mounted() {
    this.handleQuery();
  },
};
</script>

<style scoped>
</style>
